<!-- 
    @file: 用户管理
    @auth: lizibin
 -->
<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <h3>
                    <el-icon style="margin-right: 10px;">
                        <MagicStick />
                    </el-icon>用户管理
                </h3>
                <!-- 小于768px -->
                <div class="hidden-sm-and-down">
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-input :prefix-icon="Search" v-model="searchValue" @keyup.enter.native="search"
                                placeholder="关键字搜索（回车）" />
                        </el-col>
                        <el-col :span="6" style="display: inline-flex;justify-content: center;align-items: center;">
                            <el-icon style="font-size: 20px;color: #b3b6bc;" @click="refresh">
                                <Refresh />
                            </el-icon>
                        </el-col>
                    </el-row>
                </div>

                <!-- 大于等于768px  -->
                <div class="visible">
                    <p style="display: inline-flex;justify-content: center;align-items: center;">
                        <el-icon style="margin-right: 20px;" @click="openSearch">
                            <Search />
                        </el-icon>
                        <el-icon @click="refresh">
                            <Refresh />
                        </el-icon>
                    </p>
                </div>


            </div>
        </template>
        <div>
            <el-table v-loading="loading" element-loading-text="玩命加载中..." :data="tableData"
                style="width: 100%;text-align: center;" :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ fontSize: '15px', background: 'rgb(90 96 113 / 78%)', 'color': 'white', textAlign: 'center' }">
                <el-table-column label="序号" width="100" type="index" :index="Nindex" />
                <el-table-column label="用户名">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.userName" placement="top" effect="light">
                            <span class="highlight">{{ scope.row.userName }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="邮箱">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.userEmail" placement="top" effect="light">
                            <span>{{ scope.row.userEmail }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="类型">
                    <template #default="scope">
                        <div v-if="scope.row.userType == 0">管理员</div>
                        <div v-if="scope.row.userType == 1">普通用户</div>
                    </template>
                </el-table-column>
                <el-table-column label="头像">
                    <template #default="scope">
                        <!-- 用户没有设置头像，则为系统默认头像 -->
                        <el-image v-if="scope.row.userIcon" style="width:50px;border-radius: 50px;"
                            :src="scope.row.userIcon" fit="cover" preview-teleported="true"
                            :preview-src-list="[scope.row.userIcon]" :title="scope.row.urlName"></el-image>
                        <el-image v-else style="width:50px" :src="require('../../../../assets/default_avatar.png')"
                            fit="cover" preview-teleported="true"
                            :preview-src-list="[require('../../../../assets/default_avatar.png')]"
                            :title="scope.row.urlName"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="签名">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.userSignature" placement="top" effect="light">
                            <span v-if="scope.row.userSignature">{{ scope.row.userSignature }}</span>
                            <span v-else>无</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="注册时间">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.userRegdate" placement="top" effect="light">
                            <span>{{  HandeTime(scope.row.userRegdate) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="modifyUser(scope.$index, scope.row)"
                            style="margin: 0 0 10px 10px;">编辑</el-button>
                        <el-popconfirm v-if="scope.row.userName !== 'admin'" confirm-button-text="确定"
                            cancel-button-text="取消" :icon="Delete" icon-color="#626AEF"
                            :title="'确定删除用户名为“' + scope.row.userName + '”的用户吗？'"
                            @confirm="handleDelete(scope.$index, scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger" style="margin-bottom: 10px;">删除</el-button>
                            </template>
                        </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--
			    total 总行数
    			    page-size	每页显示条目个数
    			    current-change 改变页码时触发
    			    currentPage:当前页码
    			 -->
            <el-pagination class="showPaging" background layout="prev, pager, next" :total="total" :page-size="pageSize"
                @current-change="changePage" v-model:currentPage="currentPage" :pager-count="3"
                :hide-on-single-page="true" />
        <el-pagination class="hidePaging" background layout="total, sizes, prev, pager, next, jumper" :total="total"
            :page-size="[10, 20, 50, 200]" @current-change="changePage" v-model:currentPage="currentPage"
            :pager-count="3" @size-change="handleSizeChange" :hide-on-single-page="false" />
    </div>
    </el-card>
   
    <!-- 修改用户 -->
    <ModifyUser :modifyUserDialogFormVisible="modifyUserDialogFormVisible" :userInfo="userInfo"
        @onModifyUserCloseDialog="modifyUserCloseDialogVisible"></ModifyUser>
</template>

<script lang="ts" setup>
// 修改用户弹窗
import ModifyUser from './modifyUser/index.vue';
import {
    toRefs,
    reactive,
    onMounted,
} from 'vue'
import {
    Search,
    Delete
} from '@element-plus/icons-vue'
import {
    ElMessage,
    ElNotification,
    ElMessageBox
} from 'element-plus'
import { Reactive } from "@/types/userManagerTypes";
import { DeleteUser,GetUser } from '@/api/backstage/index'
import { HandeTime } from "@/utils/utils";
function loadData(state: Reactive) {
    state.loading = true
    const params = {
        currentPage: state.currentPage,
        pageSize: state.pageSize
    }
    GetUser(params).then(res => {
        console.log(res);
        // 先清空数据
        state.tableData = [];
        res.data.list.forEach((element:any) => {
            // 图片 根url
            const url = import.meta.env.VITE_HTTP;
            // 缩略图 判断是点击上传的还是，网络图片
            if (element.userIcon != null) {
                if (!element.userIcon.includes('http')) {
                    element.userIcon = url + element.userIcon
                }
            }
            // 添加
            state.tableData.push(element)
        })
        //JSON.parse 将从后台得到的数据转换为标准JSON格式
        //前台展示的是需要数组，JSON.parse转换后的数据，element-plus可以解析
        state.total = res.data.total;
        state.pageSize = res.data.pageSize;
        state.currentPage = res.data.currentPage;
        state.loading = false
    })
}
/**
 * @desc 加载搜索数据
 */
function searchContent(state: Reactive) {
    state.loading = true
    const params = {
        currentPage: state.currentPage,
        pageSize: state.pageSize,
        searchContent: state.searchValue
    }
    GetUser(params).then(res => {
        // 先清空数据
        state.tableData = [];
        res.data.list.forEach((element:any) => {
            // 图片 根url
            const url = import.meta.env.VITE_HTTP;
            // 缩略图 判断是点击上传的还是，网络图片
            if (element.userIcon != null) {
                if (!element.userIcon.includes('http')) {
                    element.userIcon = url + element.userIcon
                }
            }
            // 添加
            state.tableData.push(element)
        })
        //JSON.parse 将从后台得到的数据转换为标准JSON格式
        //前台展示的是需要数组，JSON.parse转换后的数据，element-plus可以解析
        state.total = res.data.total;
        state.pageSize = res.data.pageSize;
        state.currentPage = res.data.currentPage;
        state.loading = false
    })
}
const handleSizeChange = (val: number) => {
    state.pageSize = val;
    loadData(state)
}
const state = reactive<Reactive>({
    // 搜索表单内容
    searchValue: "",
    // 表格全部信息
    tableData: [],
    // 编辑信息弹窗状态
    modifyUserDialogFormVisible: false,
    // 当前点击的编辑信息
    userInfo: {
        userEmail: '',
        userIcon: '',
        userPass: '',
        userRegdate: '',
        userSignature: '',
        userId: -1,
        userType: -1,
        userName: '',
    },
    total: 0, //总条数
    pageSize: 10, //每页显示行数
    currentPage: 1, //当前页码
    loading: false, // 数据加载
})
const { searchValue, tableData, modifyUserDialogFormVisible, userInfo, total, pageSize, currentPage, loading } = toRefs(state)
//挂载后加载数据
onMounted(() => {
    loadData(state);
});

// 切换页面的执行事件，  val 当前页码
const changePage = (val: number) => {
    state.currentPage = val;
    //重新加载数据
    if (state.searchValue !== "") {
        // 搜索框不为空时调用搜索内容
        searchContent(state)
    } else {
        // 加载全部数据
        loadData(state);
    }
};

// 分页序号不乱
const Nindex = (index: number) => {
    // 当前页数 - 1 * 每页数据条数 + 1
    const page = state.currentPage // 当前页码
    const pagesize = state.pageSize // 每页条数
    return index + 1 + (page - 1) * pagesize
}

// openSearch 打开搜索框 分辨率低时
const openSearch = () => {
    ElMessageBox.prompt('请输入关键字进行搜索', '搜索', {
        confirmButtonText: '搜索',
        cancelButtonText: '取消',
        inputErrorMessage: 'Invalid Email',
    }).then(({
        value
    }) => {
        state.searchValue = value
        searchContent(state)

        if (value !== null) {
            ElMessage({
                type: 'success',
                message: `关键字“${value}”搜索内容如下`,
            })
        } else {
            ElMessage({
                type: 'success',
                message: `已为您清除搜索`,
            })
        }

    })
}

// 搜索
const search = () => {
    searchContent(state)
    if (state.searchValue !== "") {
        ElMessage({
            type: 'success',
            message: `关键字“${state.searchValue}”搜索内容如下`,
        })
    } else {
        ElMessage({
            type: 'success',
            message: `已为您清除搜索`,
        })
    }
}

// 刷新按钮
const refresh = () => {
    // 搜索表单内容
    state.searchValue = ""
    // 更新数据
    loadData(state);
    ElMessage({
        message: '刷新成功',
        type: 'success',
    })
}

// 修改弹窗
const modifyUser = (index: number, row: any) => {
    state.modifyUserDialogFormVisible = true;
    state.userInfo = row;
}

// 审核修改弹窗
const modifyUserCloseDialogVisible = (visible: boolean, data: any) => {
    state.modifyUserDialogFormVisible = visible;
    if (data != undefined) {
        //重新加载数据
        if (state.searchValue !== "") {
            // 搜索框不为空时调用搜索内容
            searchContent(state)
        } else {
            // 加载全部数据
            loadData(state);
        }
    }
}

// 增加删除事件
const handleDelete = (index: number, row: any) => {
    //确定删除
    let params = {
        userId: row.userId
    }
    DeleteUser(params).then(res => {
        if (res.code === 0) {
            //通知提示框
            ElNotification({
                title: '成功',
                message: '已成功删除用户名为“' + row.userName + '的用户',
                type: 'success',

            });
            //重新加载数据
            if (state.searchValue !== "") {
                // 搜索框不为空时调用搜索内容
                searchContent(state)
            } else {
                // 加载全部数据
                loadData(state);
            }
        } else {
            ElNotification({
                title: '失败',
                message: '用户删除失败',
                type: 'error',
            })
        }
    })
};

</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:deep(.el-card__header) {
    border-bottom: 1px solid rgb(238 238 238);
    /* background: linear-gradient(to right, #535b9a, #30bcd7); */
    color: #2fa7b9;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.el-card {
    border-radius: 0px;
    border: none;
}

.el-card.is-always-shadow {
    box-shadow: 0px 0px 0px rgb(0 0 0 / 12%);
}

.demo-image__error .image-slot {
    font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.demo-image__error .el-image {
    width: 100%;
    height: 200px;
}

.example-showcase .el-dropdown+.el-dropdown {
    margin-left: 15px;
}

.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}

@media screen and (min-width: 992px) {
    .visible {
        display: none !important;
    }
}

@media screen and (max-width: 992px) {
    .visible {
        display: block !important;
    }
}


/* 分页样式 */
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background-color: #2fa7b9;
}

.el-pagination {
    margin-top: 20px;
    justify-content: center;
}

:deep(.el-table .cell) {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}

@media screen and (max-width: 500px) {
    .hidePaging {
        display: none;
    }
}

@media screen and (min-width: 500px) {
    .showPaging {
        display: none;
    }
}
</style>